<template>
  <div>
    <!-- 1.搜索框开始 -->
    <div class="search">
      <!-- 1.1搜索框部分 -->
      <div class="search_input">
        <input type="text" class="search_text" placeholder="请输入想去的地方，比如：'广州'" v-model="searchValue" />
        <i class="iconfont el-icon-search" @click="searchCity"></i>
      </div>
      <!-- 1.2推荐部分 -->
      <div class="recommend_city">
        推荐：
        <span @click="recommendCity('广州')">广州</span>
        <span @click="recommendCity('上海')">上海</span>
        <span @click="recommendCity('北京')">北京</span>
      </div>
      <!-- 1.3手游记-->
      <div class="hand_travel">
        <div class="recommend_l">推荐攻略</div>
        <el-button type="primary" icon="el-icon-edit" @click="$router.push('/post/PostReport')">写游记</el-button>
      </div>
    </div>
    <!-- 1.搜索框结束 -->

    <!-- 2.内容部分 -->
    <Postitemarticle :textInfo="item" v-for="item in pageList" :key="item.id" />
    <!-- 3.0分页组件开始 -->
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="textList.length"
      ></el-pagination>
    </div>
    <!-- 3.0分页组件结束 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      textList: [],
      searchValue: "",
      currentPage: 1,
      // 页容量
      pageSize: 5,
      // 页面上显示的数据 由 pageList 来决定的
      pageList: [],
      // 提供给用户选择的页容量的列表  和分页没有直接的关系!
    };
  },

  mounted() {
    //http://157.122.54.189:9095
    //页面一加载请求数据 加载页面
    this.loadPage();
  },
  watch: {
    "$route.fullPath": function () {
      this.loadPage();
    },
  },
  methods: {
    //新打开页面或者url发生改变的时候要做的事情
    async loadPage() {
      let res = "";
      if (this.$route.query.city) {
        res = await this.$axios.get("/posts", {
          params: {
            city: this.$route.query.city,
          },
        });
      } else {
        res = await this.$axios.get("/posts");
      }
      this.textList = res.data.data;
      this.currentPage = 1;
      //开启分页
      this.filterList();
    },
    //点击搜索图标,
    searchCity() {
      console.log(this.searchValue);
      this.$router.replace({
        path: "/post",
        //参数为 searchValue里面的值
        query: { city: this.searchValue },
      });
    },
    //点击推荐的城市，赋值给input框 后面发请求可以获取城市id
    recommendCity(cityName) {
      this.searchValue = cityName;
      //赋值的同时 修改地址栏信息
      this.$router.replace({
        path: "/post",
        //参数为 searchValue里面的值
        query: { city: this.searchValue },
      });
    },

    // 页容量改变事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.filterList();
    },
    // 当前 页码改变事件
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.filterList();
    },

    //分页
    filterList() {
      this.pageList = this.textList.filter((v, index) => {
        //index 数据的索引
        // 计算开始的条数
        const start = (this.currentPage - 1) * this.pageSize;
        // 计算结束的条数
        const end = this.currentPage * this.pageSize;
        if (index >= start && index < end) {
          return true;
        } else {
          return false;
        }
      });
      console.log(11111);
      console.log(this.pageList);
    },
    //
  },
};
</script>

<style lang="less" scoped>
/*  */
.search {
  /* 搜索框部分 */
  .search_input {
    position: relative;
    .search_text {
      width: 100%;
      height: 40px;
      padding-left: 16px;
      border: 3px solid #ffa500;
      outline: none;
    }
    .iconfont {
      position: absolute;
      top: 8px;
      right: 18px;
      font-size: 24px;
      font-weight: 700;
      color: #ffa500;
    }
  }
  /* 推荐城市部分 */
  .recommend_city {
    padding: 10px 0;
    font-size: 12px;
    color: #666;
    span {
      margin-right: 5px;
      &:hover {
        color: #ffa500;
        cursor: pointer;
      }
    }
  }
  .hand_travel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    .recommend_l {
      font-size: 18px;
      color: #ffa500;
    }
  }
}
.fenye {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-bottom: 20px;
}
</style>